<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <span class="state">
          <img src="/@/assets/images/table.png" alt="" />
          电子签进度跟踪
        </span>
      </div>
      <a-table :pagination="false" :dataSource="dataSource" :columns="columns" :scroll="{ y: '63vh' }">
        <template #operate="{ record }">
          <span class="operate-btn" @click="onView">查看</span>
        </template>
        <template #state="{ record }">
          <a-button type="link" style="color: #1169e5">签约中</a-button>
          <a-button type="link" style="color: #15ce19">签约成功</a-button>
          <a-button type="link" style="color: #e51111">签约失败</a-button>
        </template>
      </a-table>
      <a-pagination class="pager" :total="50" show-size-changer show-quick-jumper />
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  const router = useRouter();
  const queryForm = ref({ state: '', code: '', name: '' });
  const dataSource = ref([
    
  ]);
  const columns = ref([
    {
      title: '操作',
      key: 'operate',
      dataIndex: 'operate',
      slots: { customRender: 'operate' },
    },
    {
      title: '合同名称',
      key: 'a',
      dataIndex: 'a',
    },
    {
      title: '客户名称',
      key: 'a',
      dataIndex: 'a',
    },
    {
      title: '合同状态',
      key: 'a',
      dataIndex: 'a',
    },
    {
      title: '合同金额',
      key: 'a',
      dataIndex: 'a',
    },
    {
      title: '租赁方式',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },

    {
      title: '剩余租金',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },
    {
      title: '剩余罚息',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },
    {
      title: '剩余名义货价',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },
    {
      title: '支付方式',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },
    {
      title: '还款卡号',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },
    {
      title: '实际起租日期',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },
    {
      title: '计划结束日期',
      key: 'state',
      dataIndex: 'state',
      slots: { customRender: 'state' },
    },
  ]);

  const onView = () => {
    router.push({ path: '/dataCenter/finish' });
  };
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: border-box;
    .query {
      width: 100%;
      display: flex;
      margin: 24rem 0;
      box-sizing: border-box;
      .state {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 22rem;
        color: #1169e5;
        margin-right: 200rem;
        img {
          width: 20rem;
          height: 19rem;
          margin-right: 14rem;
        }
      }
      .form {
        float: 1;
        display: flex;
      }
    }
    .list {
      flex: 1;
      padding: 1rem 0 0 24rem;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      .card {
        margin: 0 30rem 30rem 0;
      }
    }
  }
</style>
